<template>
	<view class="editPage">
		<uni-notice-bar show-icon text="最多可创建9个奖项，最多支持300人参与！" />
		<view class="awards">
			<view class="headTitle">—— 奖品奖项 ——</view>
			<view class="option" v-for="(item,index) in awardList" :key="item.id">
				<view class="top">
					<view class="left" @click="addPic(index)">
						<view class="pic">
							<image v-if="item.picurl" :src="item.picurl" mode="aspectFill"></image>
							<uni-icons v-else type="image" size="50" color="#555"></uni-icons>
						</view>
						<view class="text">更换图片</view>
					</view>
					<view class="right">
						<view class="row">
							<view class="name">
								<input type="text" placeholder="请输入奖项名称" v-model="item.name" />
							</view>
							<view class="remove" @click="removeAward(index)">
								<uni-icons type="minus-filled" size="30" color="#ee4626" v-if="true"></uni-icons>
							</view>
						</view>

						<view class="row">
							<view>
								<input type="text" placeholder="请输入奖品名称" v-model="item.description" />
							</view>
							<view>

							</view>
						</view>
					</view>
				</view>

				<view class="row">
					<view class="name">奖品份数</view>
					<view>
						<uv-number-box v-model="item.number"></uv-number-box>
					</view>
				</view>
			</view>

			<view class="addBox">
				<view class="btn" @click="addAwards">+ 增加奖项</view>
			</view>
		</view>



		<view class="rule">
			<view class="headTitle">—— 规则说明 ——</view>
			<view class="content">
				<textarea v-model="ruleContent" placeholder="请编辑规则说明" />
			</view>
		</view>

		<view class="more">
			<view class="headTitle">—— 更多选项 ——</view>
			<view class="content">
				<view class="row">
					<view class="name">结束时间</view>
					<view class="control">
						<uni-datetime-picker
							type="datetime"							
							:start="deftTime.start"
							:end="deftTime.end"	
							v-model="endTime"
						/>
					</view>
				</view>
				
				<view class="row">
					<view class="name">是否能重复中奖</view>
					<view class="control">
						<switch :checked="isRepeat" color="#ee4626"  @change="repeatChange"
						style="transform:scale(0.8);transform-origin: right;"/>
						
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="submitBtn" @click="onSubmit">
			<button type="primary">确认提交</button>
		</view>
		
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		uuid,
		getFileExtension
	} from '../../utils/tools';
	import dayjs from "dayjs"
import { showToast } from '../../utils/common';
	
	const awardList = ref([{
			name: "一等奖",
			description: "",
			picurl: "",
			number: 1,
			id: uuid()
		},
		{
			name: "二等奖",
			description: "",
			picurl: "",
			number: 1,
			id: uuid()
		}
	])
	const endTime = ref(null);
	const isRepeat = ref(false);
	
	//规则说明
	const ruleContent = ref(`1.点击参与报名参加活动；
2.参与后无需额外操作，等待主办方发起抽奖；
3.抽奖成功后会将抽奖结果返回，可在右上角点击查看；
4.将获奖记录给现场工作人员核销后，领取对应的奖品。`);


	const deftTime = ref({
		start:dayjs().format("YYYY-MM-DD HH:mm:ss"),
		end:dayjs().add(7,'day').endOf("day").format("YYYY-MM-DD HH:mm:ss")
	})
	
	//增加奖项
	const addAwards = () => {
		awardList.value.push({
			name: "",
			description: "",
			picurl: "",
			number: 1,
			id: uuid()
		})
	}

	//删除奖项
	const removeAward = async (index) => {
		let res = await uni.showModal({
			title: "是否删除该奖项"
		})
		if (res.confirm) {
			awardList.value.splice(index, 1)
		}
	}



	//添加图片
	const addPic = (index) => {
		uni.chooseImage({
			count: 1,
			success: res => {
				if (res.tempFilePaths.length > 0) {
					let filePath = res.tempFilePaths[0];
					uni.showLoading({
						title: "上传中",
						mask: true
					})
					uniCloud.uploadFile({
						filePath,
						cloudPath: `raffle/${dayjs().format("YYYYMMDD")}/${uuid()}_${index}.${getFileExtension(filePath)}`,
						cloudPathAsRealPath: true,
						success: res => {
							awardList.value[index].picurl = res.fileID;
							uni.hideLoading()
						},
						fail: err => {
							console.log(err);
							uni.hideLoading()
						}
					})

				}
			}
		})
	}
	
	
	//设置是否重复
	const repeatChange = (e)=>{
		isRepeat.value = e.detail.value;		
	}
	
	
	//点击提交
	const onSubmit = ()=>{
		if(!(awardList.value.length && awardList.value.every(item=>item.name && item.description))){
			showToast({title:"奖项及奖品名称必填",duration:2500})			
			return;
		}
		if(!ruleContent.value) return showToast({title:"抽奖规则必填",duration:2500})
		
		let formData = {
			awardList:awardList.value,
			ruleContent:ruleContent.value,
			isRepeat:isRepeat.value,
			endTime:endTime.value
		}
		
		console.log(formData);
	}
</script>

<style lang="scss" scoped>
	.editPage {
		.headTitle {
			font-size: 34rpx;
			text-align: center;
			line-height: 2em;
			font-weight: bold;
			color: #ee4626;
			padding-bottom: 30rpx;
		}
		
		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 34rpx;
			border-bottom: 1rpx solid #f4f4f4;
			height: 100rpx;
			padding: 10rpx 0;
		}

		.awards {
			.option {
				padding: 20rpx;
				padding-bottom: 0;
				border-bottom: 14rpx solid #f4f4f4;

				

				.top {
					display: flex;

					.left {
						width: 160rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						.pic {
							width: 120rpx;
							height: 120rpx;
							background: #f4f4f4;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							font-size: 28rpx;
							color: #999;
							line-height: 2em;
						}
					}

					.right {
						flex: 1;

						.row {
							.name {
								font-size: 38rpx;
								font-weight: bolder;
							}
						}
					}

				}
			}

			.addBox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 60rpx 0;
				background: #f4f4f4;

				.btn {
					border: 1px solid #ee4626;
					padding: 15rpx 35rpx;
					color: #ee4626;
					font-size: 36rpx;
					border-radius: 200rpx;
				}
			}
		}

		.rule {
			padding: 20rpx;
			margin-top: 60rpx;

			textarea {
				background: #fafafa;
				border: 1px solid #efefef;
				width: 100%;
				padding: 10rpx 20rpx;
				line-height: 1.7em;
				font-size: 36rpx;
				min-height: 380rpx;
				color: #333;
			}
		}

		.more{
			margin-top: 60rpx;
			.content{
				padding:20rpx;
				.control{
					width: 400rpx;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
		
		.submitBtn{
			padding:60rpx 20rpx 100rpx;
			button{
				background: #ee4626;
			}
		}
	
	}
</style>